import React, {PureComponent} from 'react';
import {Form, Input, Modal, Radio, Select, Button} from 'antd';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 12},
    md: {span: 15},
  },
};

@Form.create()
export default class EmpModal extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  componentDidMount() {
    const {modalVisible} = this.props;
    if(modalVisible){
      this.state = {
        loading: false
      };
    }
  }

  handleOk = () => {
    const _this = this;
    const {form, handleAdd} = _this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      _this.setState({loading:true});
      handleAdd(values, form);
    })
  };

  render() {
    const {form: {getFieldDecorator}, handleModalVisible, modalType, modalVisible, items} = this.props;
    const {loading} = this.state;
    return (
      <Modal
        title={modalType === 'add' ? '新增' : '修改'}
        visible={modalVisible}
        onOk={this.handleOk}
        onCancel={()=>handleModalVisible()}
        footer={[
          <Button key="back" onClick={()=>handleModalVisible()}>
            取消
          </Button>,
          <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
            保存
          </Button>,
        ]}
      >
        <Form>
          {getFieldDecorator('id', {
            initialValue: items.id,
          })(
            <Input hidden={true}/>
          )}
          <FormItem
            {...formItemLayout}
            label="所属单位"
          >
            <span>{items.orgName}</span>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="名字"
          >
            {getFieldDecorator('userCName', {
              initialValue: items.userCName,
              rules: [{
                required: true, message: '请输入名称',
              }],

            })(
              <Input placeholder="请输入名称"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="登录名"
          >
            {getFieldDecorator('username', {
              initialValue: items.username,
              rules: [{
                required: true, message: '请输入登录名',
              }, {
                pattern: /^\w+[\w\s]+\w+$/, message: '请输入英文登录名！',
              }],
            })(
              <Input placeholder="请输入登录名"/>
            )}
          </FormItem>
          {
            modalType === 'add'
            &&
            <FormItem
              {...formItemLayout}
              label="密码"
            >
              {getFieldDecorator('password', {
                rules: [{
                  required: true,
                  message: '请输入密码',
                }],
              })(
                <Input.Password placeholder="请输入密码"/>
              )}
            </FormItem>
          }
          <FormItem
            {...formItemLayout}
            label="联系电话"
          >
            {getFieldDecorator('mobile', {
              initialValue: items.mobile,
              rules: [{
                required: false, message: '请输入联系电话', validType: 'mobile'
              }, {
                pattern: /^1[3-8]+\d{9}$/, message: '请输入联系电话！',
              }],
            })(
              <Input placeholder="请输入联系电话"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="邮箱"
          >
            {getFieldDecorator('email', {
              initialValue: items.email,
              rules: [{
                message: '请输入邮箱', validType: 'email'
              }, {
                pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入邮箱！',
              }],
            })(
              <Input placeholder="请输入邮箱"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="类型"
          >
            {getFieldDecorator('type', {
              initialValue: items.type,
              rules: [{
                required: true, message: '请选择类型',
              }],
            })(
              <Select placeholder="请选择类型">
                <Select.Option key={'SYSTEM'} value={'SYSTEM'}>系统</Select.Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="状态"
          >
            {getFieldDecorator('enabled', {
              initialValue: items.enabled,
              rules: [{
                required: true, message: '请选择状态',
              }],
            })(
              <RadioGroup>
                <Radio value={true} key={true}>启用</Radio>
                <Radio value={false} key={false}>禁用</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="备注"
          >
            {getFieldDecorator('remark', {
              initialValue: items.remark,
              rules: [{
                message: '请输入备注',
              }],
            })(
              <Input placeholder="请输入备注"/>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
